import React from 'react'
import * as d3 from "d3";

class Bar extends React.Component {

    draw1=()=>{
        let marge = { top: 60, bottom: 60, left: 60, right: 60 }
        let width = 900,height = 600
        let dataset = [10, 20, 30, 23, 13, 40, 27, 35, 20];

        let svg = d3.select(".bar").attr("width",width).attr("height",height);

        let g = svg.append("g")
            .attr("transform", "translate(" + marge.top + "," + marge.left + ")");

        // //定义一个线性比例尺
        // var scaleLinear = d3.scaleLinear()
        //     .domain([0, d3.max(dataset)])
        //     .range([0, 300]);

        let xScale = d3.scaleBand()
            .domain(d3.range(dataset.length))
            .rangeRound([0, width - marge.left - marge.right]);
        let xAxis = d3.axisBottom(xScale);

        let yScale = d3.scaleLinear()
            .domain([0, d3.max(dataset)])
            .range([height - marge.top - marge.bottom, 0]);
        let yAxis = d3.axisLeft(yScale);

        
        g.append("g")
            .attr("transform", "translate(" + 0 + "," + (height - marge.top - marge.bottom) + ")")
            .call(xAxis);
        g.append("g")
            .attr("transform", "translate(0,0)")
            .call(yAxis);

        //绘制矩形和文字
        let gs = g.selectAll(".rect")
            .data(dataset)
            .enter()
            .append("g");
        //绘制矩形
        var rectPadding = 20;//矩形之间的间隙
        gs.append("rect")
            .attr("x", function (d, i) {
                return xScale(i) + rectPadding / 2;
            })
            .attr("y", function (d) {
                var min = yScale.domain()[0];
                return yScale(min);
            })
            .attr("width", function () {
                return xScale.step() - rectPadding;
            })
            .attr("height", function (d) {
                return 0;
            })
            .attr("fill", "blue")
            .transition()
            .duration(2000)
            .delay(function (d, i) {
                return i * 400;
            })
            //.ease(d3.easeElasticInOut)
            .attr("y", function (d) {
                return yScale(d);
            })
            .attr("height", function (d) {
                return height - marge.top - marge.bottom - yScale(d);
            })
            // .on("mouseover", function () {
            //     d3.select(this)
            //         .transition()
            //         .duration(1500)
            //         .attr("fill", "yellow");
            // })
            // .on("mouseout", function () {
            //     d3.select(this)
            //         .transition()
            //         .delay(1500)
            //         .duration(1500)
            //         .attr("fill", "blue");
            // })
            
        //绘制文字
        gs.append("text")
            .attr("x", function (d, i) {
                return xScale(i) + rectPadding / 2;
            })
            .attr("y", function (d) {
                var min = yScale.domain()[0];
                return yScale(min);
            })
            .attr("dx", function () {
                return (xScale.step() - rectPadding) / 2;
            })
            .attr("dy", 20)
            .text(function (d) {
                return d;
            })
            .transition()
            .duration(2000)
            .delay(function (d, i) {
                return i * 400;
            })
            //.ease(d3.easeElasticInOut)
            .attr("y", function (d) {
                return yScale(d);
            });
    }

    node_path=()=>{
        var marge = { top: 60, bottom: 60, left: 60, right: 60 }
        var width = 900
        var height = 600
        let svg = d3.select(".np").attr("width", width).attr("height", height);
        var g = svg.append("g")
            .attr("transform", "translate(" + marge.top + "," + marge.left + ")");

        //准备数据
        var nodes = [
            { name: "湖南邵阳" },
            { name: "山东莱州" },
            { name: "广东阳江" },
            { name: "山东枣庄" },
            { name: "泽" },
            { name: "恒" },
            { name: "鑫" },
            { name: "明山" },
            { name: "班长" }
        ];

        var edges = [
            { source: 0, target: 4, relation: "籍贯", value: 1.3 },
            { source: 4, target: 5, relation: "舍友", value: 1 },
            { source: 4, target: 6, relation: "舍友", value: 1 },
            { source: 4, target: 7, relation: "舍友", value: 1 },
            { source: 1, target: 6, relation: "籍贯", value: 2 },
            { source: 2, target: 5, relation: "籍贯", value: 0.9 },
            { source: 3, target: 7, relation: "籍贯", value: 1 },
            { source: 5, target: 6, relation: "同学", value: 1.6 },
            { source: 6, target: 7, relation: "朋友", value: 0.7 },
            { source: 6, target: 8, relation: "职责", value: 2 }
        ];
        //设置一个color的颜色比例尺，为了让不同的扇形呈现不同的颜色
        var colorScale = d3.scaleOrdinal()
            .domain(d3.range(nodes.length))
            .range(d3.schemeCategory10);

        //新建一个力导向图
        var forceSimulation = d3.forceSimulation()
            .force("link", d3.forceLink())
            .force("charge", d3.forceManyBody())
            .force("center", d3.forceCenter());;

        //初始化力导向图，也就是传入数据
        //生成节点数据
        forceSimulation.nodes(nodes)
            .on("tick", ticked);//这个函数很重要，后面给出具体实现和说明
        //生成边数据
        forceSimulation.force("link")
            .links(edges)
            .distance(function (d) {//每一边的长度
                return d.value * 100;
            })
        //设置图形的中心位置	
        forceSimulation.force("center")
            .x(width / 2)
            .y(height / 2);
        //在浏览器的控制台输出
        console.log(nodes);
        console.log(edges);

        //有了节点和边的数据后，我们开始绘制
        //绘制边
        var links = g.append("g")
            .selectAll("line")
            .data(edges)
            .enter()
            .append("line")
            .attr("stroke", function (d, i) {
                return colorScale(i);
            })
            .attr("stroke-width", 1);
        var linksText = g.append("g")
            .selectAll("text")
            .data(edges)
            .enter()
            .append("text")
            .text(function (d) {
                return d.relation;
            })

        //绘制节点
        //老规矩，先为节点和节点上的文字分组
        var gs = g.selectAll(".circleText")
            .data(nodes)
            .enter()
            .append("g")
            .attr("transform", function (d, i) {
                var cirX = d.x;
                var cirY = d.y;
                return "translate(" + cirX + "," + cirY + ")";
            })
            .call(d3.drag()
                .on("start", started)
                .on("drag", dragged)
                .on("end", ended)
            );

        //绘制节点
        gs.append("circle")
            .attr("r", 10)
            .attr("fill", function (d, i) {
                return colorScale(i);
            })
        //文字
        gs.append("text")
            .attr("x", -10)
            .attr("y", -20)
            .attr("dy", 10)
            .text(function (d) {
                return d.name;
            })

        function ticked() {
            links
                .attr("x1", function (d) { return d.source.x; })
                .attr("y1", function (d) { return d.source.y; })
                .attr("x2", function (d) { return d.target.x; })
                .attr("y2", function (d) { return d.target.y; });

            linksText
                .attr("x", function (d) {
                    return (d.source.x + d.target.x) / 2;
                })
                .attr("y", function (d) {
                    return (d.source.y + d.target.y) / 2;
                });

            gs
                .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });
        }
        function started(d) {
            if (!d3.event.active) {
                forceSimulation.alphaTarget(0.8).restart();
            }
            d.fx = d.x;
            d.fy = d.y;
        }
        function dragged(d) {
            d.fx = d3.event.x;
            d.fy = d3.event.y;
        }
        function ended(d) {
            if (!d3.event.active) {
                forceSimulation.alphaTarget(0);
            }
            d.fx = null;
            d.fy = null;
        }
    }

    tree=()=>{
        var marge = { top: 60, bottom: 60, left: 60, right: 60 }
        var width = 900
        var height = 600
        let svg = d3.select(".tree").attr("width", width).attr("height", height);
        var g = svg.append("g")
            .attr("transform", "translate(" + marge.top + "," + marge.left + ")");

        // var scale = svg.append("g")
        //     .attr("transform", "translate(" + marge.top + "," + marge.left + ")");
        //数据
        var dataset = {
            name: "中国",
            children: [
                {
                    name: "浙江",
                    children: [
                        { name: "杭州", value: 100 },
                        { name: "宁波", value: 100 },
                        { name: "温州", value: 100 },
                        { name: "绍兴", value: 100 }
                    ]
                },
                {
                    name: "广西",
                    children: [
                        {
                            name: "桂林",
                            children: [
                                { name: "秀峰区", value: 100 },
                                { name: "叠彩区", value: 100 },
                                { name: "象山区", value: 100 },
                                { name: "七星区", value: 100 }
                            ]
                        },
                        { name: "南宁", value: 100 },
                        { name: "柳州", value: 100 },
                        { name: "防城港", value: 100 }
                    ]
                },
                {
                    name: "黑龙江",
                    children: [
                        { name: "哈尔滨", value: 100 },
                        { name: "齐齐哈尔", value: 100 },
                        { name: "牡丹江", value: 100 },
                        { name: "大庆", value: 100 }
                    ]
                },
                {
                    name: "新疆",
                    children:
                        [
                            { name: "乌鲁木齐" },
                            { name: "克拉玛依" },
                            { name: "吐鲁番" },
                            { name: "哈密" }
                        ]
                }
            ]
        };

        //创建一个hierarchy layout
        var hierarchyData = d3.hierarchy(dataset)
            .sum(function (d) {
                return d.value;
            });

        //创建一个树状图
        var tree = d3.tree()
            .size([width - 400, height - 200])
            .separation(function (a, b) {
                return (a.parent === b.parent ? 1 : 2) / a.depth;
            })

        //初始化树状图，也就是传入数据,并得到绘制树基本数据
        var treeData = tree(hierarchyData);
        console.log(treeData);
        //得到节点
        var nodes = treeData.descendants();
        var links = treeData.links();

        //输出节点和边
        console.log(nodes);
        console.log(links);

        //创建一个贝塞尔生成曲线生成器
        var Bézier_curve_generator = d3.linkHorizontal()
            .x(function (d) { return d.y; })
            .y(function (d) { return d.x; });

        //有了节点和边集的数据后，我们就可以开始绘制了，
        //绘制边
        g.append("g")
            .selectAll("path")
            .data(links)
            .enter()
            .append("path")
            .attr("d", function (d) {
                var start = { x: d.source.x, y: d.source.y };
                var end = { x: d.target.x, y: d.target.y };
                return Bézier_curve_generator({ source: start, target: end });
            })
            .attr("fill", "none")
            .attr("stroke", "yellow")
            .attr("stroke-width", 1);

        //绘制节点和文字
        //老规矩，先创建用以绘制每个节点和对应文字的分组<g>
        var gs = g.append("g")
            .selectAll("g")
            .data(nodes)
            .enter()
            .append("g")
            .attr("transform", function (d) {
                var cx = d.x;
                var cy = d.y;
                return "translate(" + cy + "," + cx + ")";
            });
        //绘制节点
        gs.append("circle")
            .attr("r", 6)
            .attr("fill", "white")
            .attr("stroke", "blue")
            .attr("stroke-width", 1);

        //文字
        gs.append("text")
            .attr("x", function (d) {
                return d.children ? -40 : 8;
            })
            .attr("y", -5)
            .attr("dy", 10)
            .text(function (d) {
                return d.data.name;
            });
    }

    componentDidMount(){
        this.draw1()
        this.node_path()
        this.tree()
    }
    render(){
        return (<div>
            <svg className="bar" />
            <svg className="np" />
            <svg className="tree" />
        </div>)
            
    }
}

export default Bar